<template>
  <div class="container">
    <div class="alertLabel">
      {{alertLabelText}}
    </div>
    <div class="heade">
      <div class="search">
        <p><router-link to="/home">首页</router-link> > <router-link to="/personal/PersonalInformation">个人中心 </router-link> > <a href="javascript:void(0);">{{buyCarParams.car_style}}</a></p>
        <div>
          <input type="text" v-model='inputVal' @keyup.enter="search" placeholder="请输入品牌车型">
          <i @click="search"></i>
        </div>
      </div>
      <div class="heade_con">
        <div class="carMainPic" v-bind:style="{
          'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + buyCarParams.car_main_pic + ') no-repeat center center',
          'backgroundSize': '100% auto'
        }">
          <!-- <img :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' +buyCarParams.car_main_pic" alt=""> -->
          <p class="license">{{buyCarParams.plate_number}}</p>
        </div>
        <div class="heade_con_r">
          <h2>{{buyCarParams.car_style}}</h2>
          <ul>
            <li class="tex">
              <h3>{{carInfos.registerDate}}</h3>
              <p>上牌时间</p>
            </li>
            <li class="box"></li>
            <li class="tex">
              <h3>{{carInfos.mileage}} 万公里</h3>
              <p>行驶里程</p>
            </li>
            <li class="box"></li>
            <li class="tex">
              <h3>{{carInfos.exhaust}}L</h3>
              <p>排量</p>
            </li>
            <li class="box"></li>
            <li class="tex">
              <h3>{{carInfos.storage}}</h3>
              <p>所在城市</p>
            </li>
          </ul>
          <div class="times">
            <p :class="stateClassNmae">{{this.stateTex}}</p>
            <div class="times_times">
              <div class="tim">
                <p style="margin-bottom:12px">开始时间 : {{startTimes}}</p>
                <p>结束时间 : {{endTimes}}</p>
              </div>
              <!-- <div class="countDown">
                <p style="margin-bottom:12px">{{tex}} :</p>
                <p class="ti">
                  {{countDown.days}}<span> 天</span>
                  {{countDown.hours}}<span> 时</span>
                  {{countDown.minutes}}<span> 分</span>
                  {{countDown.seconds}}<span> 秒</span>
                </p>
              </div> -->
            </div>
          </div>
          <p class="marked">{{LabelText}}<span>{{moneys}}</span>{{LabelText1}}</p>
          <div class="Label">
            <div class="telephone">
              <img src="../../../../static/img/buyCar/details/buy_img_tel.png" alt="">
              <span>400-877-9737</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detailed">
      <ul>
        <li @click="chen('1')" style="backgroundColor:#ff6f3c;color:#fff;">车辆概要</li>
        <li @click="chen('2')">检测信息</li>
        <li @click="chen('3')" v-if="trfo">投标记录 ( {{ carList1.totalRecords}}条 )</li>
        <li @click="chen('4')" v-if="!trfo">竞拍记录 ( {{ carList1.totalRecords}}条 )</li>
      </ul>
    </div>
    <div :is="pages" :carList1='carList1' :userId='userLis.id' :isTr='isTr'>
    </div>
  </div>
</template>
<script>
import page1 from '../../../components/listList/VehicleOutline'
import page2 from '../../../components/listList/container'
import page3 from '../../../components/listList/biddingRecords'
import page4 from '../../../components/listList/biddingRecords1'
export default {
  data () {
    return {
      isTr: false,
      LabelText: '',
      LabelText1: '',
      moneys: '',
      stateClassNmae: '',
      alertLabelText: '',
      pages: 'page1',
      inputVal: '',
      buyCarParams: {},
      carList1: {},
      carInfos: {},
      stateTex: '',
      startTimes: '',
      endTimes: '',
      countDown: {
        days: '00',
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      tex: '距开始',
      trfo: true,
      userLis: '',
      userInfor: '',
      ifSolicitudeFn: true
    }
  },
  mounted () {
    this.buyCarParams = this.$route.query
    // console.log(this.$route.query)
    this.getFinanceData()
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
    }
  },
  components: {
    page1,
    page2,
    page3,
    page4
  },
  methods: {
    alertLabelShow () {
      $('.alertLabel').eq(0).fadeIn(0)
      setTimeout(function () {
        $('.alertLabel').eq(0).fadeOut(0)
      }, 3000)
    },
    solicitudeFn () {
      // 判断是否登陆
      if (this.userLis.id && this.userLis.id !== '') {
        let httpUrl = ''
        if (this.ifSolicitudeFn) {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/addFoucus'
        } else {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/unsubscribe'
        }
        let _this = this
        // 读取本地
        let storage = window.sessionStorage
        let json = storage.getItem('WSKuserLis')
        let jsonObj = JSON.parse(json)
        if (jsonObj) {
          this.userLis = jsonObj.data.data.user
        }
        this.$http({
          url: httpUrl,
          params: {
            userId: this.userLis.id,
            carId: this.buyCarParams.id
          },
          headers: {'from': 'web'}
        }).then(r => {
          _this.getFinanceData()
          _this.ifSolicitudeFn = !_this.ifSolicitudeFn
        })
      } else {
        var test = window.location.href
        alert(test)
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    Bid () {
      // 判断是否已登陆
      if (this.userLis.id) {
        // 车辆信息
        this.buyCarParams = this.$route.query
        // 判断此用户是否为车主
        if (this.userLis.id === this.buyCarParams.owner_id) {
          this.alertLabelText = '此车辆是您委托的'
          this.alertLabelShow()
        } else {
          // 判断是否已经开始投标
          if (this.carList1.bidSingle.status === '0') {
            this.buyCarParams = this.$route.query
            let x = this.buyCarParams
            this.$http({
              url: 'http://paimai.ucarcloud.cn/auctionCarCore/user/wetherParticipate',
              params: {
                userId: this.userLis.id,
                carId: this.buyCarParams.id,
                type: '0'
              },
              headers: {'from': 'web'}
            }).then(r => {
              // 判断是否参加过本车辆的投标 ‘0’ 代表没有
              if (r.data.data.wether === '0') {
                this.$router.push({path: '/buyCar/Bid', name: '/buyCar/Bid', query: x})
              } else if (r.data.data.wether === '1') {
                this.$router.push({path: '/buyCar/BidOffer', name: '/buyCar/BidOffer', query: x})
              }
            })
          } else {
            // 判断  '未开始' 或 '已结束'
            if (this.tex === '距开始') {
              this.alertLabelText = '投标尚未开始 ！'
              this.alertLabelShow()
            } else {
              this.alertLabelText = '投标已结束 ！'
              this.alertLabelShow()
            }
          }
        }
      } else {
        var test = window.location.href
        alert(test)
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    // 参与竞拍
    Bidders () {
      // 判断是否登陆
      if (this.userLis.id) {
        // 车辆信息
        this.buyCarParams = this.$route.query
        // 判断此用户是否为车主
        if (this.userLis.id === this.buyCarParams.owner_id) {
          this.alertLabelText = '此车辆是您委托的'
          this.alertLabelShow()
        } else {
          // 判断是否已经开始竞拍
          if (this.carList1.bidSingle.status === '2') {
            let y = this.buyCarParams
            this.$http({
              url: 'http://paimai.ucarcloud.cn/auctionCarCore/user/wetherParticipate',
              params: {
                userId: this.userLis.id,
                carId: this.buyCarParams.id,
                type: '1'
              },
              headers: {'from': 'web'}
            }).then(r => {
              // 判断是否参加过本车辆的投标 ‘0’ 代表没有
              if (r.data.data.wether === '0') {
                this.$router.push({path: '/buyCar/Bidders', name: '/buyCar/Bidders', query: y})
              } else if (r.data.data.wether === '1') {
                this.$router.push({path: '/buyCar/BiddersOffer', name: '/buyCar/BiddersOffer', query: y})
              }
            })
          } else {
            // 判断  '未开始' 或 '已结束'
            if (this.tex === '距开始') {
              this.alertLabelText = '竞拍尚未开始 ！'
              this.alertLabelShow()
            } else {
              this.alertLabelText = '竞拍已结束 ！'
              this.alertLabelShow()
            }
          }
        }
      } else {
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    search () {
      this.$router.push({path: '/buyCar', name: '/buyCar', params: {inputVals: this.inputVal}})
    },
    getFinanceData () {
      this.buyCarParams = this.$route.query
      window.scrollTo(0, 0)
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/getCarBidInfos',
        params: {
          carId: this.buyCarParams.id,
          userId: this.userLis.id
        },
        headers: {'from': 'web'}
      }).then(r => {
        this.carList1 = r.data.data
        this.carInfos = this.carList1.carInfo
        this.startTimes = r.data.data.bidSingle.startTime.substring(0, 16)
        this.endTimes = r.data.data.bidSingle.endTime.substring(0, 16)
        switch (this.buyCarParams.status) {
          case '1':
            this.stateTex = '投 标成 功'
            this.trfo = true
            if (this.userLis.id === r.data.data.ownerId) {
              this.LabelText = '恭喜您 , 您的爱车以'
              this.LabelText1 = '售出 ！'
            } else {
              this.LabelText = '恭喜您 , 您以'
              this.LabelText1 = '拍得该车辆 ！'
              this.isTr = true
            }
            if (r.data.data.bidSingle.currentHighestPrice) {
              this.moneys = (r.data.data.bidSingle.currentHighestPrice / 10000).toFixed(2) + '万元'
            } else {
              this.moneys = (r.data.data.bidSingle.auctionPrice / 10000).toFixed(2) + '万元'
            }
            this.stateClassNmae = 'green'
            break
          case '3':
            this.stateTex = '竞 拍成 功'
            this.trfo = false
            if (this.userLis.id === r.data.data.ownerId) {
              this.LabelText = '恭喜您 , 您的爱车以'
              this.LabelText1 = '售出 ！'
            } else {
              this.LabelText = '恭喜您 , 您以'
              this.LabelText1 = '拍得该车辆 ！'
            }
            if (r.data.data.bidSingle.currentHighestPrice) {
              this.moneys = (r.data.data.bidSingle.currentHighestPrice / 10000).toFixed(2) + '万元'
            } else {
              this.moneys = (r.data.data.bidSingle.auctionPrice / 10000).toFixed(2) + '万元'
            }
            this.stateClassNmae = 'green'
            break
          case '4':
            if (this.userLis.id === r.data.data.ownerId) {
              this.LabelText = '很遗憾 ,'
              this.LabelText1 = '您的爱车未能售出 ！'
              this.stateTex = '已流拍'
              this.stateClassNmae = 'red1'
            } else {
              this.LabelText = '很遗憾，您未'
              this.LabelText1 = '拍得该车辆 ！'
              this.stateTex = '竞 拍失 败'
              this.stateClassNmae = 'red'
            }
            this.trfo = false
            this.moneys = ''
            break
          case '6':
            if (this.userLis.id === r.data.data.ownerId) {
              this.LabelText = '很遗憾 ,'
              this.LabelText1 = '您的爱车未能售出 ！'
              this.stateTex = '已流拍'
              this.stateClassNmae = 'red1'
            } else {
              this.LabelText = '很遗憾，您未'
              this.LabelText1 = '拍得该车辆 ！'
              this.stateTex = '投 标失 败'
              this.stateClassNmae = 'red'
            }
            this.trfo = true
            this.moneys = ''
            break
          default:
            this.stateTex = ''
            break
        }
      })
    },
    chen (x, ev) {
      this.pages = 'page' + x
      let eve = ev || window.event
      let tar = eve.target || eve.srcElement
      let lis = tar.parentNode.children
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.backgroundColor = ''
        lis[i].style.color = '#333'
      }
      tar.style.backgroundColor = '#ff6f3c'
      tar.style.color = '#fff'
    }
  }
}
</script>
<style lang="scss" scoped>
.orange{
  background: #ff6f3c;
  color: #fff;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  padding: 16px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  float: left;
}
.red{
  background: #e50303;
  color: #fff;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  padding: 16px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  float: left;
}
.red1{
  background: #e50303;
  color: #fff;
  width: 80px;
  height: 80px;
  line-height: 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  float: left;
}
.yello{
  background: #fdc125;
  color: #fff;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  padding: 16px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  float: left;
}
.green{
  background: #19b233;
  color: #fff;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  padding: 16px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  float: left;
}
.container{
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 0;
  .alertLabel{
    display: none;
    width: 260px;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    font-size: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -130px;
    z-index: 10001;
  }
  .heade{
    .search{
      // width: 1200px;
      // overflow: hidden;
      height: 75px;
      line-height: 75px;
      &>p{
        float: left;
        font-size: 14px;
        color: #666;
        margin-left: -150px;
        width: 600px;
        height: 75px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        &>a{
          color: #666;
          &:hover{
            color: #ff6f3c;
          };
        };
      }
      &>div{
        float: right;
        height: 38px;
        width: 340px;
        border: 1px solid #e3e3e3;
        margin-top: 20px;
        line-height: 0;
        i{
          display: block;
          float: right;
          width: 38px;
          height: 20px;
          background: url('../../../../static/img/buyCar/buy_search.png') no-repeat 45% 1px;
          cursor: pointer;
          border-left: 2px solid #e3e3e3;
          margin-top: 8px;
        }
        input{
          width: 290px;
          height: 100%;
          padding-left: 10px;
        }
      }
    }
    .heade_con{
      overflow: hidden;
      margin-bottom: 30px;
      .carMainPic{
        float: left;
        width: 600px;
        height: 400px;
        position: relative;
        background-size: 100% auto !important;
        img{
          width: 100%;
          height: 100%;
        }
        p{
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          color: #fff;
          font-size: 18px;
          text-align: center;
          background: rgba(0,0,0,0.6)
        }
      }
      .heade_con_r{
        float: right;
        width: 565px;
        h2{
          font-size: 24px;
          line-height: 30px;
          color: #333;
          height: 62px;
          overflow: hidden;
        }
        &>ul{
          overflow: hidden;
          .tex{
            float: left;
            width: 138px;
            text-align: center;
            h3{
              margin: 30px 0 16px;
              font-size: 18px;
              color: #333;
            }
            p{
              margin: 0 0 30px 0;
              font-size: 14px;
              color: #999;
            }
          }
          .box{
            height: 32px;
            border-left: 2px solid #e3e3e3;
            width: 0px;
            float: left;
            margin-top: 38px;
          }
        }
        .times{
          overflow: hidden;
          padding-top: 10px;
          .times_times{
            float: left;
            height: 80px;
            background: #fafafa;
            width: 484px;
            padding: 20px 0 20px 20px;
            box-sizing: border-box;
            overflow: hidden;
            text-align: left;
            .tim{
              float: left;
            }
          }
          .countDown{
            float: right;
            padding-right: 20px;
            .ti{
              color: #ff6f3c;
              font-size: 18px;
              span{
                color: #333;
                font-size: 14px;
              }
            }
          }
        }
        .marked{
          margin-top: 30px;
          margin-bottom: 25px;
          font-size: 24px;
          color: #333;
          span{
            font-size: 36px;
            color: #ff6f3c;
          }
        }
        .Label{
          overflow: hidden;
          .bid{
            width: 190px;
            height: 50px;
            background: #ff6f3c;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            float: left;
            cursor: pointer;
            img{
              margin-top: 14px;
              vertical-align: -4px;
              margin-right: 10px;
              width: 22px;
              height: 22px;
            }
          }
          .solicitude{
            float: left;
            cursor: pointer;
            width: 144px;
            height: 50px;
            background: #fff8f6;
            border-radius: 5px;
            color: #ff6f3c;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #ff6f3c;
            margin: 0 19px 0;
            img{
              margin-top: 13px;
              vertical-align: -4px;
              margin-right: 10px;
              width: 24px;
              height: 24px;
            }
          }
          .telephone{
            float: left;
            cursor: pointer;
            width: 190px;
            height: 50px;
            background: #fdc125;
            border-radius: 5px;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            img{
              margin-top: 14px;
              vertical-align: -5px;
              margin-right: 10px;
              width: 20px;
              height: 24px;
            }
          }
        }
      }
    }
  }
  .detailed{
    overflow: hidden;
    height: 60px;
    line-height: 60px;
    background: #fafafa;
    border-top: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #ff6f3c;
    border-left: 1px solid #e3e3e3;
    width: 1198px;
    ul{
      li{
        width: 180px;
        float: left;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
